<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>学车在线首页</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>

    <div class="box-bd">
      <ul class="clearfix">
        <script>
          // 一、熟悉结构和数据
          let data = [{
              src: 'images/course01.png',
              title: 'Think PHP 5.0 博客系统实战项目演练',
              num: 1125
            },
            {
              src: 'images/course02.png',
              title: 'Android 网络动态图片加载实战',
              num: 357
            },
            {
              src: 'images/course03.png',
              title: 'Angular2大前端商城实战项目演练',
              num: 22250
            },
            {
              src: 'images/course04.png',
              title: 'AndroidAPP实战项目演练',
              num: 389
            },
            {
              src: 'images/course05.png',
              title: 'UGUI源码深度分析案例',
              num: 124
            },
            {
              src: 'images/course06.png',
              title: 'Kami2首页界面切换效果实战演练',
              num: 432
            },
            {
              src: 'images/course07.png',
              title: 'UNITY 从入门到精通实战案例',
              num: 888
            },
            {
              src: 'images/course08.png',
              title: 'Cocos 深度学习你不会错过的实战',
              num: 590
            },
            {
              src: 'images/course04.png',
              title: '自动添加的模块',
              num: 1000
            }
          ]
          for (let i = 0; i < data.length; i++) {
            // 1.数组的每一项
            const element = data[i];
            document.write(`
            <li>
              <a href="#">
                <img src="${element.src}" title="${element.title}" alt="">
                <h4>
                  ${element.title}
                </h4>
                <div class="info">
                  <span>高级</span> • <span>${element.num}</span>人在学习
                </div>
              </a>
            </li>
            `)
            
          }


        </script>
      </ul>
    </div>
  </div>
  <!-- 4. box核心内容区域开始 -->
  <!-- <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li>



            </ul>
        </div>
    </div> -->

  <!-- <script src="./baseTool.js"></script> -->
</body>

</html>